<template>
  <div>
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="120px" :disabled="pageType == 'look'">
      <el-form-item label="欢迎语设置" prop="welcome_type">
        <el-radio-group v-model="formData.welcome_type">
          <el-radio :label="1">新建欢迎语</el-radio>
          <el-radio :label="3">已有欢迎语</el-radio>
        </el-radio-group>
        <div> <el-button v-if="formData.welcome_type == 3" size="small" @click="onWelcome" type="primary" plain>选择已有欢迎语</el-button></div>
      </el-form-item>
      <el-form-item prop="welcome_content">
        <div class="container">
          <el-input class="item_con_input input_textarea" type="textarea" :rows="6" v-model="formData.welcome_content" placeholder="请输入欢迎语" resize="none" show-word-limit @input="onName" />

          <!-- <el-input maxlength="2000" show-word-limit @input="onName" v-model="formData.welcome_content" :rows="6" type="textarea" placeholder="请输入欢迎语" class="content_input" /> -->
          <div class="text_btn">
            <div>
              <span @click="onNickName" style="cursor: pointer">插入客户昵称</span>
              <span style="margin: 0 6px 0 18px; color: #33302d; cursor: pointer" @click="onOpenMaterial('1')">选择文本</span>
              <span style="cursor: pointer" @click="emojiVisible = !emojiVisible">😊</span></div
            >
            <div
              ><span class="color:#ff6b00">{{ formData.welcome_content.length }} <span style="color: #969696">/1000</span> </span></div
            >
          </div>
          <!-- 表情管理 -->
          <div class="emoj_box">
            <ZWEmoji v-show="emojiVisible" @choose="chooseEmoji" />
          </div>
          <!-- 文件信息 -->
          <el-scrollbar class="upload_list_box" max-height="230px">
            <ul class="upload_list">
              <li class="upload_item" v-for="item in fileInfo" :key="item.id">
                <img class="file_icon" :src="item.cur_icon" alt="" />
                <div class="file_name">{{ item.name }}</div>
                <img class="del_icon" @click="onRemove(item.id)" src="@/assets/image/channel/remove_icon.png" />
              </li>
            </ul>
          </el-scrollbar>
          <!-- 选择素材 -->
          <el-popover placement="top-start" popper-class="pop_select_box" :width="300" trigger="hover">
            <template #reference>
              <div class="text_hover"> <span style="font-size: 22px; margin-right: 5px">+</span> 添加图片/视频/音频/文件/链接/抽奖 </div>
            </template>
            <template #default>
              <div class="upload_pop">
                <div class="item_pop" v-for="item in uploadList" :key="item.id" @click="onOpenUpload(item.id)">
                  <img class="item_pop_icon" :src="item.icon" alt="" />
                  <span class="item_pop_name">{{ item.name }}</span>
                </div>
              </div>
            </template>
          </el-popover>
          <!-- 欢迎语预览 -->
          <div class="prev_box">
            <div class="phone_con">
              <span class="phone-title">欢迎语预览</span>
              <el-scrollbar class="phone_List">
                <div class="bg_friend">

                  <div class="user_con" v-for="item in fileList" :key="item.id">
                    <img class="user_avator" src="/static/user.png" alt="" />
                    <div class="friend_main">
                      <div class="user_name">{{ item.user_name || '张三' }}</div>
                      <!--欢迎语-->
                      <template v-if="item.type == 0">
                        <div class="welcomeWords">{{ item.content }}</div>
                      </template>
                      <!-- 图片 -->
                      <template v-else-if="item.type == 1">
                        <el-image class="send_image" :src="item.absolute_url" alt="" fit="cover">
                          <template #error>
                            <el-image class="send_image" src="/static/file/pic.png" alt=""></el-image>
                          </template>
                        </el-image>
                      </template>
                      <!-- 音频 -->
                      <template v-else-if="item.type == 4">
                        <div class="user_file">
                          <div class="user_file_main">
                            <div class="user_file_desc">{{ item.title }}</div>
                            <el-image :src="item.cur_icon" alt="" class="user_file_icon" fit="cover"></el-image>
                          </div>
                          <div class="user_file_size">
                            {{ item.file_size ? (item.file_size / 1024 / 1024).toFixed(2) + ' M' : '' }}
                          </div>
                        </div>
                      </template>
                      <!-- 视频 -->
                      <template v-else-if="item.type == 2">
                        <div class="video_list">
                          <el-image class="video_image" :src="item.thumbnail_url" alt="" fit="cover">
                            <template #error>
                              <el-image class="video_image" src="/static/file/mov.png" alt=""></el-image>
                            </template>
                          </el-image>
                          <el-image class="video_play" src="/static/play.png" alt="" fit="cover"></el-image>
                        </div>
                      </template>
                      <!-- 文件 -->
                      <template v-else-if="item.type == 5">
                        <div class="user_file">
                          <div class="user_file_main">
                            <div class="user_file_desc">{{ item.title }}</div>
                            <el-image :src="getSuffixIcon(item.name)" alt="" class="user_file_icon" fit="cover"></el-image>
                          </div>
                          <!-- <div class="user_file_size">
              {{ (item?.mediaFileInfo.size / 1024 / 1024).toFixed(2) }}M
            </div> -->
                        </div>
                      </template>
                      <!-- 链接 -->
                      <template v-else-if="item.type == 3">
                        <div class="user_link">
                          <div class="user_link_tit">{{ item.title }}</div>
                          <div class="user_link_main">
                            <div class="user_link_desc">{{ item.content }}</div>
                            <el-image :src="item.cover_image_url" alt="" class="user_link_icon" fit="cover">
                              <template #error>
                                <el-image class="user_link_icon" src="/static/file/pic.png" alt=""></el-image>
                              </template>
                            </el-image>
                          </div>
                        </div>
                      </template>
                    </div>
                  </div>
                </div>
              </el-scrollbar>
            </div>
          </div>
        </div>
      </el-form-item>
      <!-- <el-form-item label="分时段欢迎语"> <el-switch v-model="formData.time_welcome_switch" :active-value="1" :inactive-value="2" class="ml-2" /></el-form-item> -->
      <!-- 分时段欢迎语 -->
      <WelcomeTime
        v-if="formData.time_welcome_switch == 1"
        v-for="(item, index) in formData.time_welcome"
        :timeList="timeList[index]"
        :key="item.index"
        :indexId="index"
        @onDel="handleDel"
        @onData="handleData"
        :pageType="pageType"
        :periodTime="formData.time_welcome"
      ></WelcomeTime>
      <!-- <el-form-item v-if="formData.time_welcome_switch == 1">
        <el-button @click="addTime">添加时段</el-button>
      </el-form-item> -->
      <div style="text-align: center; border-top: 1px solid #d9d9d9; margin-bottom: 20px"></div>
      <el-form-item label="活动图文" prop="activity_image">
        <div class="img_box">
          <div>图文封面</div>
          <UploadImg
            :rule="{
              type: 'jpg|JPG|jpeg|JPEG|png|PNG',
              unit: 'MB',
              size: 2
            }"
            :url="formData.activity_image"
            @submit="(v) => (formData.activity_image = v)"
          />
          <div class="text">(图片大小不超过2M，支持JPG，JPEG格式。建议尺寸200*200)</div>
        </div>
      </el-form-item>

      <div style="width: 780px">
        <el-form-item label="活动标题" label-width="190px" prop="title">
          <el-input v-model="formData.title" placeholder="呼朋唤友, 免费拿奖品" />
        </el-form-item>
        <el-form-item label="填写描述" label-width="190px" prop="desc">
          <el-input maxlength="150" show-word-limit v-model="formData.desc" :rows="4" type="textarea" placeholder="好友，你可以给我打个call吗？" class="content_input" />
        </el-form-item>
      </div>
    </el-form>
  </div>
  <!-- 素材弹框 -->
  <ZWMatericalLib ref="ZWMatericalLibRef" @submit="getFiles" />
  <!-- 已有欢迎语弹框 -->
  <Dialog :appDialog="appDialog">
    <el-table :data="tableData" ref="multipleTable" stripe height="580" style="width: 100%" header-row-class-name="table_header_title" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="content" label="欢迎语" min-width="220">
        <template v-slot="scope">
          <span class="text">{{ scope.row.content }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="welcome_friend_attachment" min-width="200">
        <template v-slot="scope">
          <template v-for="v in scope.row.welcome_friend_attachment" :key="v.id">
            <!-- // 图片 -->
            <el-tooltip :content="v.media_file.name + ' ' + (v.media_file.size / 1024 / 1024).toFixed(2) + 'M'" placement="top" effect="light" v-if="v.type === 1">
              <el-image
                class="wel_content_file_item"
                :src="v.media_file.absolute_url || '/static/file/pic.png'"
                :preview-src-list="bigImgList"
                :preview-teleported="true"
                :initial-index="1"
                @click="BigImage(v.media_file.absolute_url)"
                style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px"
              >
                <template #error>
                  <img style="width: 40px; height: 40px" src="/static/file/pic.png" alt="" />
                </template>
              </el-image>
            </el-tooltip>
            <!-- 视频 -->
            <el-tooltip :content="v.media_file.name" placement="top" effect="light" v-if="v.type === 2">
              <div class="pay-item" @click="downLoad(v.media_file.absolute_url)">
                <div class="play"></div>
                <el-image class="wel_content_file_item" :src="v.media_file.absolute_url || '/static/file/pic.png'" style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px">
                  <template #error>
                    <el-image src="/static/file/mov.png" alt=""></el-image>
                  </template>
                </el-image>
              </div>
            </el-tooltip>
            <!-- 链接 -->
            <el-tooltip v-if="v.type === 3" :content="v.link_title || '暂无标题'" placement="top" effect="light">
              <img class="wel_content_file_item" src="/static/file/link.png" style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px" />
            </el-tooltip>
            <!-- 音频 -->
            <el-tooltip :content="v.media_file.name + ' ' + (v.media_file.size / 1024 / 1024).toFixed(2) + 'M'" placement="top" effect="light" v-if="v.type === 4">
              <img class="wel_content_file_item" src="/static/file/mp3.png" @click="downLoad(v.media_file.absolute_url)" style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px" />
            </el-tooltip>
            <!-- 文件 -->
            <el-tooltip :content="v.media_file.name + ' ' + (v.media_file.size / 1024 / 1024).toFixed(2) + 'M'" placement="top" effect="light" v-if="v.type === 5">
              <img class="wel_content_file_item" :src="getSuffixIcon(v.media_file.name)" @click="downLoad(v.media_file.absolute_url)" style="width: 40px; height: 40px; margin-right: 5px; margin-bottom: 5px" />
            </el-tooltip>
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="send_times" label="消息数量" width="125"> </el-table-column>
      <!-- 部门、员工 -->
      <el-table-column prop="depart" label="生效部门、员工" min-width="150">
        <template v-slot="scope">
          <div class="depart_main">
            {{ scope.row.department.length > 0 ? getSetionId('name', scope.row.department).join('、') : ' ' }}
            {{ scope.row.work_user.length > 0 ? getSetionId('name', scope.row.work_user).join('、') : '' }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="user_name" label="创建人" min-width="150"></el-table-column>
      <el-table-column prop="user_local_department" label="所在部门" min-width="150">
        <template v-slot="scope">
          <span>{{ scope.row.user_local_department && scope.row.user_local_department.length > 0 ? getSetionId('name', scope.row.user_local_department).join('、') : '--' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="created_at" label="创建时间" min-width="200"></el-table-column>
      <el-table-column prop="updated_at" label="修改时间" min-width="200"></el-table-column>
      <template #empty>
        <el-empty :image-size="150" description="您还没有创建欢迎语">
          <template #image>
            <img src="/static/noBind.png" alt="" />
            <el-button type="primary" size="small" @click="router.push('/channel/qwbasicoperation/welcomefriend/addWelcomFriend')">创建欢迎语</el-button>
          </template>
        </el-empty>
      </template>
    </el-table>
    <ZWPagination ref="PaginationRef" @submit="getChannelFriendList" />
  </Dialog>
</template>

<script setup lang="ts">
  import UploadImg from '@/view/smartMarketing/components/UploadImg.vue'
  import { ref, reactive, watch, defineEmits, defineProps, nextTick, onDeactivated, onUnmounted } from 'vue'
  import { ElMessage } from 'element-plus'
  import type { FormInstance, UploadProps, UploadUserFile } from 'element-plus'
  import { useRouter } from 'vue-router'
  import { useStore } from '@/store'
  import { DFormat, getSetionId, IsNotEmpty, getSuffixIcon } from '@/utils/utils'
  import ZWMatericalLib from '@/components/channel/ZWMatericalLib.vue'
  import ZWEmoji from '@/components/ZWEmoji.vue'
  import Dialog from '@/components/Dialog.vue'
  import { channelFriendList } from '@/api/channel/qwbase'
  import { uploadFile2 } from '@/api/common'
  import WelcomeTime from './WelcomeTime.vue'
  interface Props {
    pageType: any
  }
  const props = withDefaults(defineProps<Props>(), {
    pageType: ''
  })
  const emit = defineEmits(['submit'])
  const router = useRouter()
  const store = useStore()
  const ZWMatericalLibShow = ref(true)
  const uploadList = reactive([
    { id: '2', icon: '/static/file/pic.png', name: '图片' },
    { id: '3', icon: '/static/file/mp3.png', name: '音频' },
    { id: '4', icon: '/static/file/mov.png', name: '视频' },
    { id: '5', icon: '/static/file/ysb.png', name: '文件' },
    { id: '6', icon: '/static/file/link.png', name: '链接' }
  ])
  const onURL = (data: any) => {
    let fileTYpe = {
      '.pdf': '/static/file/pdf.png',
      '.doc': '/static/file/doc.png',
      '.docx': '/static/file/doc.png',
      '.xls': '/static/file/xls.png',
      '.xlsx': '/static/file/xls.png',
      '.ppt': '/static/file/ppt.png',
      '.pptx': '/static/file/ppt.png'
    }
    if (data) {
      const last = data.substring(data.lastIndexOf('.'))
      return fileTYpe[last] || '/static/file/file.png'
    }
  }
  const formRef = ref<FormInstance>()
  const ZWMatericalLibRef: any = ref(null)
  const emojiVisible = ref(false)
  const fileList = ref([])
  const fileInfo = ref([])
  const formData = ref({
    welcome_type: 1, // 欢迎语类型 1 新建  3 已有
    welcome_content: '', // 欢迎语内容
    // welcome_attachment: [{ type: '', media_content_id: '' }],
    // local_link: [{ link_title: '', link_url: '', link_decs: '', link_share_image: '' }],
    // local_content: [{ code: '', type: '' }],
    welcome_attachment: [],
    local_link: [],
    local_content: [],
    // 分时段欢迎语开关
    time_welcome_switch: 1,
    time_welcome: [],
    /*  {
        week: [], // 星期几
        start_at: '', // 开始时间
        end_at: '', // 结束时间
        type: 1, // 欢迎语类型
        content: 1, // 内容
        attachment: {
          type: '', //  1  3
          media_content_id: '' //  媒体库id
        },
        // 本地连接
        local_link: {
          link_title: '',
          link_url: '',
          link_decs: '',
          link_share_image: ''
        },
        // 本地上传
        local_content: {
          code: '',
          type: ''
        }
      } */
    activity_image: '',
    title: '',
    desc: ''
  })
  const rules = reactive({
    welcome_type: [{ required: true, message: '请选择欢迎语类型', trigger: 'change' }],
    activity_image: [{ required: true, message: '请选择图文封面', trigger: 'change' }],
    title: [{ required: true, message: '请输入活动标题', trigger: 'blur' }],
    desc: [{ required: true, message: '请输入活动描述', trigger: 'blur' }],
    welcome_content: [{ required: true, message: '请输入欢迎语内容', trigger: 'blur' }]
  })

  //更改欢迎语
  const onName = () => {
    fileList.value[0] = {
      type: 0,
      content: formData.value.welcome_content
    }
  }

  // 插入名字
  const onNickName = () => {
    if (props.pageType == 'look') return
    formData.value.welcome_content += '##客户姓名## '
    fileList.value[0] = {
      type: 0,
      content: formData.value.welcome_content
    }
  }
  //表情包管理
  const chooseEmoji = (emoji: any) => {
    //事件。数据包含文本区域的值
    if (props.pageType == 'look') return
    formData.value.welcome_content = formData.value.welcome_content + emoji
    fileList.value[0] = {
      type: 0,
      content: formData.value.welcome_content
    }
    emojiVisible.value = false
  }
  //打开素材上传框
  const onOpenMaterial = (num: string) => {
    if (props.pageType == 'look') return
    ZWMatericalLibRef.value.materVisible = true
    ZWMatericalLibRef.value.baseId = num //打开对应的基础素材
    ZWMatericalLibRef.value.existFile = Number(9 - fileList.value.length) //打开对应的基础素材
  }
  //获取素材
  let text = []
  const getFiles = (res: any) => {
    console.log(res, '上传框返回的素材')
    if (res.data.length + formData.value.welcome_attachment.length > 8) {
      ElMessage.error('最多只能上传8个素材,请删除后再上传')
      return
    }
    if (res.local) {
      // 链接
      if (res.type == 6) {
        const { code, content, cover_image_url, link_desc, link_url, title } = res.data[0]
        formData.value.local_link.push({ link_title: title, link_url: link_url, link_decs: link_desc, link_share_image: cover_image_url })
        // formData.value.local_content.push({ code: code, type: 3 })
        fileList.value.push({ id: code, ...res.data[0], type: 3 })
        fileInfo.value.push({ id: code, cur_icon: '/static/file/link.png', name: res.data[0].title })
      } else {
        const { code, name, url } = res.data[0]
        if (res.type == 2) {
          fileList.value.push({ id: code, absolute_url: url, type: 1 })
          formData.value.local_content.push({ code: code, type: 1 })
          fileInfo.value.push({ id: code, cur_icon: '/static/file/pic.png', name: name })
        }
        if (res.type == 3) {
          fileList.value.push({ id: code, absolute_url: url, type: 4 })
          formData.value.local_content.push({ code: code, type: 4 })
          fileInfo.value.push({ id: code, cur_icon: '/static/file/mp3.png', name: name })
        }
        if (res.type == 4) {
          fileList.value.push({ id: code, absolute_url: url, type: 2, thumbnail_url: `${url}?x-oss-process=video/snapshot,t_0,f_jpg,w_320,h_240,m_fast` })
          formData.value.local_content.push({ code: code, type: 2 })
          fileInfo.value.push({ id: code, cur_icon: '/static/file/mov.png', name: name })
        }
        if (res.type == 5) {
          fileInfo.value.push({ id: code, cur_icon: onURL(url), name: name })
          fileList.value.push({ id: code, absolute_url: url, type: 5, ...res.data[0] })
          formData.value.local_content.push({ code: code, type: 5 })
        }
      }
    } else {
      // 文本
      if (res.type == 1) {
        let arr = [...new Set(res.data)]
        console.log('文本', arr)
        arr.forEach((item: any, index) => {
          formData.value.welcome_content = item.content
          fileList.value[0] = {
            type: 0,
            content: formData.value.welcome_content
          }
        })
      }
      // 图片
      if (res.type == 2) {
        res.data.forEach((item: any) => {
          formData.value.welcome_attachment.push({
            type: 1,
            media_content_id: item.id
          })
          fileList.value.push({ ...item, ...{ type: 1 } })
          fileInfo.value.push({ id: item.id, cur_icon: '/static/file/pic.png', name: item.file_name })
        })
      }
      // 音频
      if (res.type == 3) {
        res.data.forEach((item: any) => {
          formData.value.welcome_attachment.push({
            type: 4,
            media_content_id: item.id
          })

          item.cur_icon = '/static/file/mp3.png'
          fileList.value.push({ ...item, ...{ type: 4 } })
          fileInfo.value.push({ id: item.id, cur_icon: '/static/file/mp3.png', name: item.file_name })
        })
      }
      // 视频
      if (res.type == 4) {
        res.data.forEach((item: any) => {
          formData.value.welcome_attachment.push({
            type: 2,
            media_content_id: item.id
          })
          fileList.value.push({ ...item, ...{ type: 2 } })
          fileInfo.value.push({ id: item.id, cur_icon: '/static/file/mov.png', name: item.file_name })
        })
      }
      // 文件
      if (res.type == 5) {
        res.data.forEach((item: any) => {
          formData.value.welcome_attachment.push({
            type: 5,
            media_content_id: item.id
          })
          item.name = item.mediaFileInfo.name
          fileList.value.push({ ...item })
          fileInfo.value.push({ id: item.id, cur_icon: onURL(item.mediaFileInfo.url), name: item.name })
        })
      }
      // 链接
      if (res.type == 6) {
        res.data.forEach((item: any) => {
          formData.value.welcome_attachment.push({
            type: 3,
            media_content_id: item.id
          })
          fileList.value.push({ ...item, ...{ type: 3 } })
          fileInfo.value.push({ id: item.id, cur_icon: '/static/file/link.png', name: item.title })
        })
      }
    }
  }
  // 打开上传
  const onOpenUpload = (num: string) => {
    if (props.pageType == 'look') return
    ZWMatericalLibRef.value.materVisible = true
    ZWMatericalLibRef.value.baseId = num //打开对应的基础素材
    ZWMatericalLibRef.value.existFile = Number(9 - fileList.value.length) //打开对应的基础素材
  }
  // 删除上传的文件
  const onRemove = (id: any) => {
    if (props.pageType == 'look') return
    console.log(id, '父组件删除', formData.value.local_link)

    fileList.value = fileList.value.filter((item: any) => item.id != id)
    fileInfo.value = fileInfo.value.filter((item: any) => item.id != id)
    formData.value.welcome_attachment = formData.value.welcome_attachment.filter((item: any) => item.media_content_id != id)
    formData.value.welcome_attachment = formData.value.welcome_attachment.filter((item: any) => item.media_file_id != id)
    formData.value.local_link = formData.value.local_link.filter((item: any) => item.link_title != id)
    formData.value.local_content = formData.value.local_content.filter((item: any) => item.id != id)
  }
  // 已有欢迎语
  // 弹框配置项
  const tableData = ref([]) //已有欢迎语数据
  const seleItem = ref() // 选中的欢迎语数据
  const multipleTable = ref()
  // 选择已有素材取消
  const cancelHandel = () => {
    appDialog.visible = false
  }
  const onWelcome = (data?: any) => {
    getChannelFriendList()

    appDialog.visible = true
  }
  // 选择已有素材确认
  const submitHandel = () => {
    console.log(seleItem.value, '选择已有素材确认')
    fileList.value = []
    fileInfo.value = []
    formData.value = {
      welcome_type: 1, // 欢迎语类型 1 新建  3 已有
      welcome_content: '', // 欢迎语内容
      welcome_attachment: [],
      local_link: [],
      local_content: [],
      time_welcome_switch: 1,
      time_welcome: [],
      activity_image: '',
      title: '',
      desc: ''
    }

    const { content, welcome_friend_attachment } = seleItem.value
    // if (welcome_friend_attachment.length + formData.value.welcome_attachment.length > 8) {
    //   ElMessage.error('最多只能上传8个素材,请删除后再上传')
    //   return
    // }
    formData.value.welcome_content = content
    welcome_friend_attachment.forEach((item: any) => {
      if (item.type != 3) {
        formData.value.welcome_attachment.push({ type: item.type, media_content_id: item.content_id })
        fileList.value.push({ ...item.media_file, type: item.type })
        // 图片
        if (item.type == 1) {
          fileInfo.value.push({ id: item.content_id, cur_icon: '/static/file/pic.png', name: item.media_file.name })
        }
        // 视频
        if (item.type == 2) {
          fileInfo.value.push({ id: item.content_id, cur_icon: '/static/file/mov.png', name: item.media_file.name })
        }
        // 音频
        if (item.type == 4) {
          fileInfo.value.push({ id: item.content_id, cur_icon: '/static/file/mp3.png', name: item.media_file.name })
        }
        // 文件
        if (item.type == 5) {
          fileInfo.value.push({ id: item.content_id, cur_icon: onURL(item.media_file.url), name: item.media_file.name })
        }
      } else {
        formData.value.local_link.push({ type: 3, media_content_id: item.content_id })
        fileList.value.push({ ...item.media_content_link, id: item.content_id })
        fileInfo.value.push({ id: item.content_id, cur_icon: '/static/file/link.png', name: item.link_title })
      }
    })
    cancelHandel()
  }

  // 单选欢迎语
  const handleSelectionChange = (selection: any) => {
    if (selection.length > 1) {
      multipleTable.value.clearSelection()
      multipleTable.value.toggleRowSelection(selection.pop())
    } else {
      seleItem.value = selection
    }
    seleItem.value = selection[0]
  }
  const appDialog = reactive({
    visible: false,
    title: '选择已有欢迎语',
    width: '1200px',
    cancel: cancelHandel,
    submit: submitHandel,
    cancelText: '取消',
    submitText: '保存',
    isInit: false, //是否重置
    isChooseDisabled: false, //重新打开传递进来的数据是否重置
    chooseArr: [] // 传递进来选中的数据
  })
  // 获取已有素材文件列表
  const getChannelFriendList = (data?: any) => {
    channelFriendList({
      page: 1,
      page_size: data?.page_size || 15,
      ...data
    }).then((res: any) => {
      tableData.value = res.data
      store.dispatch('pageTotal', res.total)
    })
  }
  // 分时段欢迎语
  const addTime = () => {
    formData.value.time_welcome.push({
      week: [],
      content: ''
    })
  }
  // 删除
  const handleDel = (index: number) => {
    console.log(index, '删除分时段欢迎语')

    formData.value.time_welcome.splice(index, 1)
    console.log(formData.value.time_welcome, '删除')
    ElMessage.success('删除成功')
  }
  const dialogImageUrl = ref('')
  const dialogVisible = ref(false)
  const picIndex = ref(0)
  // 删除图片
  const handleRemove: UploadProps['onRemove'] = () => {
    formData.value.activity_image = ''
  }
  // 图片预览
  const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile: any) => {
    dialogImageUrl.value = uploadFile.url!
    dialogVisible.value = true
  }
  // 上传图片
  const handleChange: UploadProps['onChange'] = async (file: any) => {
    if (file.size / 1024 / 1024 > 10) {
      ElMessage.error('上传图片大小不能超过10M')
      return false
    }
    const res = await uploadFile2({
      file: file.raw,
      fileName: file.name
    })
    formData.value.activity_image = res.url
  }
  const handleData = (val: any, index: any) => {
    console.log(val, index, '分时段欢迎语, 父组件')
    formData.value.time_welcome[index] = { ...val.time_welcome }
  }
  const onLookData = (val: any) => {
    onName()
    console.log(val, '欢迎语父组件')
    val?.forEach((item: any) => {
      // 图片

      if (item.type != 3) {
        if (item.content_id != 0) {
          formData.value.welcome_attachment.push({ type: item.type, media_content_id: item.content_id, media_file_id: 0 })
        } else {
          formData.value.welcome_attachment.push({ type: item.type, media_content_id: 0, media_file_id: item.file_id })
        }
        if (item.type == 1) {
          fileInfo.value.push({ id: item.content_id ? item.content_id : item.file_id, cur_icon: '/static/file/pic.png', name: item.media_file.name })
          fileList.value.push({ ...item.media_file, type: item.type, id: item.content_id ? item.content_id : item.file_id })
        }
        // 视频
        if (item.type == 2) {
          fileInfo.value.push({ id: item.content_id ? item.content_id : item.file_id, cur_icon: '/static/file/mov.png', name: item.media_file.name })
          fileList.value.push({ ...item.media_file, type: item.type, id: item.content_id ? item.content_id : item.file_id, thumbnail_url: `${item.media_file.absolute_url}?x-oss-process=video/snapshot,t_0,f_jpg,w_320,h_240,m_fast` })
        }

        // 音频
        if (item.type == 4) {
          fileList.value.push({ ...item.media_file, type: item.type, id: item.content_id ? item.content_id : item.file_id, cur_icon: '/static/file/mp3.png' })
          fileInfo.value.push({ id: item.content_id ? item.content_id : item.file_id, cur_icon: '/static/file/mp3.png', name: item.media_file.name })
        }
        // 文件
        if (item.type == 5) {
          fileList.value.push({ ...item.media_file, type: item.type, id: item.content_id ? item.content_id : item.file_id })
          fileInfo.value.push({ id: item.content_id ? item.content_id : item.file_id, cur_icon: onURL(item.media_file.url), name: item.media_file.name })
        }
      } else {
        // 链接
        if (item.content_id) {
          formData.value.welcome_attachment.push({ type: item.type, media_content_id: item.content_id, media_file_id: 0 })
          fileInfo.value.push({ id: item.content_id, cur_icon: '/static/file/link.png', name: item.link_title })
          fileList.value.push({ ...item.media_content_link, type: item.type, id: item.content_id })
        } else {
          formData.value.local_link.push({ link_title: item.link_title, link_url: item.link_url, link_decs: item.link_decs, link_share_image: item.link_share_image })
          fileInfo.value.push({ id: item.link_title, cur_icon: '/static/file/link.png', name: item.link_title })
          fileList.value.push({ cover_image_url: item.link_share_image, type: item.type, id: item.link_title })
        }
      }
    })
  }
  watch(
    () => formData.value.welcome_content,
    (newV, oldV) => {
      if (formData.value.welcome_content.length <= 1000) {
        onName()
      } else {
        formData.value.welcome_content = oldV
      }
    },
    { immediate: true }
  )

  const timeList = ref([])
  const onlookTime = (val: any) => {
    val.forEach((item) => {
      formData.value.time_welcome.push({})
    })
    timeList.value = val
  }
  const onSubmit = async () => {
    if (!formRef.value) return
    let arr: any = []
    formData.value.time_welcome.forEach((item: any) => {
      if (item) {
        arr.push(item.content)
        arr.push(item.week[0])
      } else {
        arr.push(true)
      }
    })
    await formRef.value.validate((valid: any, fields: any) => {
      if ((valid && arr.every((item: boolean) => item)) || (valid && formData.value.time_welcome_switch == 1)) {
        emit('submit', true)
      } else {
        ElMessage.error('请填完必填项')
      }
    })
  }
  defineExpose({
    formData,
    onSubmit,
    onLookData,
    onlookTime
  })
</script>

<style lang="scss" scoped>
  .img_box {
    display: grid;
    grid-template-columns: 64px 110px 1fr;
    grid-gap: 20px;
    font-size: 10px;

    .text {
      padding-top: 80px;
    }
  }

  $num: 2;
  @mixin ellips($num) {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: $num;
    line-clamp: $num;
    -webkit-box-orient: vertical;
  }
  :deep .el-checkbox {
    margin-right: 18px;
  }
  .pop_select_box {
    height: 84px;

    .upload_btn {
      margin-top: 8px;
    }

    .upload_pop {
      background: #ffffff;
      border-radius: 12px;
      // box-shadow: 0px 2px 4px 0px rgba(216, 216, 216, 0.5);
      display: flex;
      align-items: center;
      justify-content: space-around;

      .item_pop {
        width: 60px;
        height: 62px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        .item_pop_icon {
          width: 40px;
          cursor: pointer;
        }

        .item_pop_name {
          font-size: 14px;
          margin-top: 2px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #1a1918;
        }
      }
    }
  }
  .container {
    position: relative;
    width: 600px;
    height: 480px;
    background: #f8f8f8;
    border-radius: 4px;
    :deep(.el-textarea__inner) {
      border: none;
      box-shadow: none;
      background-color: #f8f8f8;
      border-bottom: 1px solid #eaeaea;
    }
    .text_btn {
      padding: 5px;
      padding-left: 16px;
      color: #ff6b00;
      display: flex;
      justify-content: space-between;
    }
    .text_hover {
      position: absolute;
      bottom: 15px;
      left: 15px;
      z-index: 10;
      display: flex;
      cursor: pointer;
      width: 230px;
      padding: 0 12px;
      color: #969696;
      background: #f8f8f8;
      border: 1px solid #d9d9d9;
    }
    .upload_list_box {
      overflow: hidden;
      height: 230px;
    }

    .upload_list {
      .upload_item {
        margin-top: 5px;
        width: 440px;
        height: 32px;
        box-sizing: border-box;
        background: #eaeaea;
        display: flex;
        padding: 0px 10px 0px 14px;
        align-items: center;

        .file_icon {
          width: 20px;
          height: 20px;
          margin-right: 7px;
        }

        .file_name {
          width: 375px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }

        .del_icon {
          width: 10px;
          height: 10px;
          cursor: pointer;
        }
      }
    }
    .prev_box {
      flex: 1;
      position: absolute;
      right: -480px;
      top: 0;

      .phone_con {
        // justify-content: center;
        position: relative;
        margin: -20px auto;
        width: 244px;
        height: 495px;
        box-sizing: border-box;
        border-radius: 36px;
        border: 9px solid #eef5fe;
        background: url('@/assets/image/channel/phone_bg.png');
        background-size: cover;

        .phone-title {
          position: absolute;
          top: -40px;
          left: 75px;
        }

        .phone_List {
          width: 100%;
          box-sizing: border-box;
          position: absolute;
          top: 48px;
          height: 380px;
          bottom: 48px;
          padding: 7px 10px;

          .bg_friend {
            // width: 100%;

            .public_title {
              font-size: 11px;
              margin-top: -10px;
              text-align: center;
              font-family: STHeitiSC-Light, STHeitiSC;
              font-weight: 300;
              color: #33302d;
            }
            .public_time {
              text-align: center;
              font-size: 11px;
              font-family: STHeitiSC-Light, STHeitiSC;
              font-weight: 300;
              color: #969696;
            }
            .user_con {
              margin-top: 10px;
              display: flex;
              .user_avator {
                width: 22px;
                height: 22px;
                margin-right: 4px;
              }
              .friend_main {
                flex: 1;
                .user_name {
                  font-size: 12px;
                  margin-top: -8px;
                  font-family: STHeitiSC-Medium, STHeitiSC;
                  font-weight: 500;
                  color: #969696;
                  transform: scale(0.6);
                  transform-origin: left top;
                  margin-bottom: 4px;
                }
                .welcomeWords {
                  position: relative;
                  margin-top: -23px;
                  font-size: 12px;
                  color: #969696;
                  line-height: 15px;
                  transform: scale(0.6);
                  transform-origin: left top;
                  width: 160px;
                  box-sizing: border-box;
                  height: 67px;
                  overflow: hidden;
                  padding: 5px 10px;
                  background-color: #fff;
                  border-radius: 5px;
                  @include ellips(4);
                  &::after {
                    content: '';
                    position: absolute;
                    left: -5px;
                    top: 10px;
                    width: 0;
                    height: 0;
                    border-top: 5px solid transparent;
                    border-right: 8px solid #fff;
                    border-bottom: 5px solid transparent;
                  }
                }
                .send_image {
                  width: 68px;
                  height: 46px;
                  margin-top: -23px;
                }
                .video_list {
                  position: relative;
                  width: 80px;
                  height: 55px;
                  margin-top: -23px;

                  .video_image {
                    width: 100%;
                    height: 100%;
                  }
                  .video_play {
                    width: 15px;
                    height: 15px;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                  }
                }
                .user_link {
                  // margin-left: 5px;
                  margin-top: -23px;
                  position: relative;
                  width: 151px;
                  height: 65px;
                  box-sizing: border-box;
                  padding: 5px 10px;
                  border-radius: 5px;
                  background: #ffffff;
                  &::after {
                    content: '';
                    position: absolute;
                    left: -5px;
                    top: 10px;
                    width: 0;
                    height: 0;
                    border-top: 5px solid transparent;
                    border-right: 8px solid #fff;
                    border-bottom: 5px solid transparent;
                  }
                  .user_link_tit {
                    width: 100%;
                    font-size: 12px;
                    font-family: STHeitiSC-Light, STHeitiSC;
                    font-weight: 300;
                    color: #000000;
                    transform: scale(0.83);
                    transform-origin: left top;
                    @include ellips(2);
                  }
                  .user_link_main {
                    margin-top: 4px;
                    display: flex;
                    .user_link_desc {
                      width: 110px;
                      font-size: 12px;
                      font-family: STHeitiSC-Light, STHeitiSC;
                      font-weight: 300;
                      color: #969696;
                      transform: scale(0.6);
                      transform-origin: left top;
                      margin-top: 2px;
                      @include ellips(3);
                    }
                    .user_link_icon {
                      width: 22px;
                      height: 22px;
                    }
                  }
                }
                .user_file {
                  position: relative;
                  // margin-left: 5px;
                  margin-top: -23px;
                  width: 150px;
                  height: 48px;
                  box-sizing: border-box;
                  padding: 8px;
                  border-radius: 3px;
                  background: #ffffff;
                  &::after {
                    content: '';
                    position: absolute;
                    left: -5px;
                    top: 6px;
                    width: 0;
                    height: 0;
                    border-top: 5px solid transparent;
                    border-right: 10px solid #fff;
                    border-bottom: 5px solid transparent;
                  }
                  .user_file_main {
                    display: flex;
                    .user_file_desc {
                      width: 105px;
                      font-size: 12px;
                      transform: scale(0.83);
                      transform-origin: left top;
                      margin-bottom: 2px;
                      font-family: STHeitiSC-Light, STHeitiSC;
                      font-weight: 300;
                      color: #000000;
                      @include ellips(2);
                    }
                    .user_file_icon {
                      width: 30px;
                      height: 30px;
                    }
                  }
                  .user_file_size {
                    // margin-top: 2px;
                    font-family: STHeitiSC-Light, STHeitiSC;
                    font-weight: 300;
                    color: #969696;
                    font-size: 12px;
                    transform: scale(0.6);
                    transform-origin: left top;
                  }
                }
              }
            }
          }
        }
      }
    }
    .welc_time_top {
      display: flex;
      align-items: center;
      width: 600px;
      height: 40px;

      font-size: 14px;
      font-family: STHeitiSC-Medium, STHeitiSC;
      font-weight: 500;
      color: #33302db3;
      line-height: 20px;
      background: #fffaf9;
      .radius_left {
        width: 8px;
        height: 8px;
        margin: 0 20px;
        border-radius: 50%;
        background: #ff6b00;
      }
    }
    .welc_content_t {
      display: flex;
      align-items: center;
      margin: 20px 0;
      .welc_color {
        width: 3px;
        height: 18px;
        background: #ff6b00;
        margin-right: 10px;
      }
    }
    .welc_content_c {
      width: 600px;
      height: 103px;
      padding: 0 0 0 10px;
      background: #ffffff;
      border: 1px solid #eaeaea;
      .check_box {
        display: flex;
        margin-bottom: 6px;
      }
      .inp_time {
      }
    }
  }
</style>
